<template>
    <div>
        <el-container style="height:100%;border:0px solid #eee">
            <el-aside width="15%" style="background-color: #eee">
                <el-menu :default-openeds="['1']" background-color="#545c64" text-color="#fff" style="height: 100%;">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message" style="color: #eee;"></i>老人信息管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link :to="{path:'/indexPage',query: {loginUserId: this.ManagerId}}"
                                    style="text-decoration: none;color: #eee;">
                                    查看老人
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link :to="{path:'/evaluate',query: {loginUserId: this.ManagerId}}" style="text-decoration: none;color: #eee;">
                                    老人评估
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <router-link :to="{path:'/voluntary',query: {managerid: this.ManagerId}}"
                                    style="text-decoration: none;color: #eee;">
                                    待处理信息
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link :to="{path:'/managerset',query: {managerid: this.ManagerId}}"
                                style="text-decoration: none;color: #eee;">
                                管理信息设置
                            </router-link></span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container width="85%" height="100%">

                <!-- 志愿者模块 -->
                <el-header style="height: 100px; width: 100%;border-bottom: 1px solid #ababab66;">
                    <el-row>
                        <el-col style="margin-bottom: 2%;margin-top: 1%;padding-left: 5%;">
                            <el-button type="primary" @click="addVoluntaryDialog()">添加志愿者活动</el-button>
                            <span style="font-size: 40px;margin-left: 25%;">志愿者时长与服务</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="tableData" style="width:1200px">
                        <el-table-column prop="id" label="编号" align="center" width="70px">
                        </el-table-column>
                        <el-table-column prop="title" label="标题" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="summary" label="简介" align="center" width="250px">
                        </el-table-column>
                        <el-table-column prop="phone" label="联系方式" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="duration" label="志愿时长(小时)" align="center" width="80px">
                        </el-table-column>
                        <el-table-column prop="eventtime" label="活动时间" align="center" width="150px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button type="primary" @click="openAlterDialog(scope.row.id)">修改</el-button>
                                <el-button @click="deleteVoluntary(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <!-- 志愿申请模块 -->
                <el-header style="height: 100px; width: 100%;border-bottom: 1px solid #ababab66;">
                    <el-row>
                        <el-col style="margin-bottom: 2%;margin-top: 1%;padding-left: 5%;text-align: center;">
                            <span style="font-size: 40px;">志愿申请服务</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="voluntaryTable" style="width:1200px">
                        <el-table-column prop="id" label="编号" align="center" width="70px">
                        </el-table-column>
                        <el-table-column prop="userid" label="用户ID" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="username" label="用户名" align="center" width="250px">
                        </el-table-column>
                        <el-table-column prop="voluntaryid" label="志愿活动ID" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="voluntarytitle" label="志愿活动标题" align="center" width="150px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button @click="deleteVolAct(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>

                <!-- 家政预约模块 -->
                <el-header style="height: 100px; width: 100%;border-bottom: 1px solid #ababab66;">
                    <el-row>
                        <el-col style="margin-bottom: 2%;margin-top: 1%;padding-left: 5%;text-align: center;">
                            <span style="font-size: 40px;">家政预约服务</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="serviceTable" style="width:1200px">
                        <el-table-column prop="id" label="编号" align="center" width="70px">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="number" label="电话" align="center" width="250px">
                        </el-table-column>
                        <el-table-column prop="service" label="所需服务" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="time" label="咨询时间" align="center" width="200px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button @click="deleteService(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>

                <!-- 预约订餐 -->
                <el-header style="height: 100px; width: 100%;border-bottom: 1px solid #ababab66;">
                    <el-row>
                        <el-col style="margin-bottom: 2%;margin-top: 1%;padding-left: 5%;text-align: center;">
                            <span style="font-size: 40px;">预约订餐服务</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="recordTable" style="width:1200px">
                        <el-table-column prop="id" label="订单号" align="center" width="70px">
                        </el-table-column>
                        <el-table-column prop="userId" label="用户编号" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="names" label="订单内容" align="center" width="250px">
                        </el-table-column>
                        <el-table-column prop="prices" label="价格" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="date" label="下单时间" align="center" width="200px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button @click="deleteRecord(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>

                <!-- 预约挂号 -->
                <el-header style="height: 100px; width: 100%;border-bottom: 1px solid #ababab66;">
                    <el-row>
                        <el-col style="margin-bottom: 2%;margin-top: 1%;padding-left: 5%;text-align: center;">
                            <span style="font-size: 40px;">预约挂号服务</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <el-table :data="hospitalTable" style="width:1200px">
                        
                        <el-table-column prop="name" label="用户称谓" align="center" width="100px">
                        </el-table-column>
                        <el-table-column prop="number" label="联系方式" align="center" width="200px">
                        </el-table-column>
                        <el-table-column prop="department" label="科室" align="center" width="150px">
                        </el-table-column>
                        <el-table-column prop="idcart" label="身份证" align="center" width="200px">
                        </el-table-column>
                        <el-table-column prop="time" label="时间" align="center" width="200px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button @click="deleteHospital(scope.row.id)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>

            </el-container>

        </el-container>

        <!-- 添加志愿活动的窗口 -->
        <el-dialog title="添加志愿者活动" :visible.sync="dialogAddVoluVisible" label-width="80px" width="700px">
            <el-form :model="inputVoluntaryInfo" :rules="inputVoluntaryInfoRule">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="inputVoluntaryInfo.title" autocomplete="off" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="summary">
                    <el-input type="textarea" v-model="inputVoluntaryInfo.summary" autocomplete="off"
                        placeholder="简介"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="inputVoluntaryInfo.phone" autocomplete="off" placeholder="联系方式"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="inputVoluntaryInfo.address" autocomplete="off" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item label="志愿时长（小时）" prop="duration">
                    <el-input v-model="inputVoluntaryInfo.duration" autocomplete="off" placeholder="志愿时长"></el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="eventtime">
                    <el-input v-model="inputVoluntaryInfo.eventtime" autocomplete="off" placeholder="活动时间"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVoluVisible = false">取 消</el-button>
                <el-button type="primary" @click="addVoluntary()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改志愿活动的弹窗 -->
        <el-dialog title="修改志愿信息" :visible.sync="dialogAlVoluVisible">
            <el-form :model="updateVoluntaryInfo">
                <el-input v-model="updateVoluntaryInfo.title" autocomplete="off" style="margin-bottom: 2%;"
                    placeholder="标题"></el-input>
                <el-input v-model="updateVoluntaryInfo.summary" type="textarea" autocomplete="off"
                    style="margin-bottom: 2%;" placeholder="简介"></el-input>
                <el-input v-model="updateVoluntaryInfo.phone" autocomplete="off" style="margin-bottom: 2%;"
                    placeholder="联系方式"></el-input>
                <el-input v-model="updateVoluntaryInfo.address" autocomplete="off" style="margin-bottom: 2%;"
                    placeholder="地点"></el-input>
                <el-input v-model="updateVoluntaryInfo.duration" autocomplete="off" style="margin-bottom: 2%;"
                    placeholder="志愿时长（小时）"></el-input>
                <el-input v-model="updateVoluntaryInfo.eventtime" autocomplete="off" style="margin-bottom: 2%;"
                    placeholder="活动时间"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAlVoluVisible = false">取 消</el-button>
                <el-button type="primary" @click="alterVoluntary()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    // import {ref} from 'vue';
    export default {
        data() {
            return {
                ManagerId: 0,
                tableData: [],
                serviceTable:[],
                recordTable:[],
                hospitalTable:[],
                voluntaryTable:[],
                dialogAddVoluVisible: false,
                dialogAlVoluVisible: false,
                inputVoluntaryInfo: {
                    title: " ",
                    summary: " ",
                    phone: " ",
                    address: " ",
                    duration: " ",
                    eventtime: " "
                },
                inputVoluntaryInfoRule: {
                    title: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    summary: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    phone: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    duration: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    eventtime: [{ required: true, message: '请输入内容', trigger: 'blur' }]
                },
                updateVoluntaryInfo: {
                    id: 0,
                    title: " ",
                    summary: " ",
                    phone: " ",
                    address: " ",
                    duration: " ",
                    eventtime: " "
                },

            }
        }, mounted() {
            //获得当前管理员的id
            this.ManagerId = this.$route.query.managerid;
            this.getVoluntaryById(this.$route.query.managerid);
            this.getAllServiceInfo();
            this.getAllRecord();
            this.getAllHospital();
            this.getAllVoluntary();

        }, methods: {
            openAlterDialog: function (val) {
                this.dialogAlVoluVisible = true;
                axios.get("http://localhost:8080/getVoluById/" + val).then(result => {
                    this.updateVoluntaryInfo = result.data.data;
                })

            },
            deleteVoluntary: function (val) {
                axios.delete("http://localhost:8080/deleteVoluntary/" + val).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/getVoluntaryById/" + this.ManagerId).then((result) => {
                            this.tableData = result.data.data;
                        })
                    }
                })
            },
            deleteService:function(val){
                axios.delete("http://localhost:8080/delServiceById/"+val).then((result)=>{
                    if(result.data.code == 1)
                    {
                        this.getAllServiceInfo();
                    }
                })
            },
            deleteRecord:function(val)
            {
                axios.get("http://localhost:8080/delRecordById/"+val).then(result=>{
                    if(result.data.code == 1)
                    {
                        this.getAllServiceInfo();
                    }
                })
            },
            deleteHospital:function(val)
            {
                axios.delete("http://localhost:8080/delHospitalById/"+val).then((result)=>{
                    if(result.data.code == 1)
                    {
                        this.getAllHospital();
                    }
                })
            },
            deleteVolAct:function(val)
            {
                axios.delete("http://localhost:8080/delVolAct/"+val).then((result)=>{
                    if(result.data.code == 1)
                    {
                        this.getAllVoluntary();
                    }
                })
            },
            getVoluntaryById: function (val) {
                axios.get("http://localhost:8080/getVoluntaryById/" + val).then((result) => {
                    this.tableData = result.data.data;
                })
            },
            getAllServiceInfo:function(){
                axios.get("http://localhost:8080/getAllService").then((result) => {
                    this.serviceTable = result.data.data;
                })
            },
            getAllRecord:function(){
                axios.get("http://localhost:8080/getAllRecord").then((result) => {
                    this.recordTable = result.data.data;
                })
            },
            getAllHospital:function()
            {
                axios.get("http://localhost:8080/getAllHospital").then((result) => {
                    this.hospitalTable = result.data.data;
                })
            },
            getAllVoluntary:function()
            {
                axios.get("http://localhost:8080/getAllVolAct").then((result) => {
                    this.voluntaryTable = result.data.data;
                })
            },
            addVoluntaryDialog: function () {
                this.dialogAddVoluVisible = true;
            },
            addVoluntary: function () {
                this.dialogAddVoluVisible = false;

                let realInfo = {
                    managerid: 0,
                    title: "",
                    summary: "",
                    phone: "",
                    address: "",
                    duration: "",
                    eventtime: ""
                }
                realInfo.managerid = this.ManagerId;
                realInfo.title = this.inputVoluntaryInfo.title;
                realInfo.summary = this.inputVoluntaryInfo.summary;
                realInfo.phone = this.inputVoluntaryInfo.phone;
                realInfo.address = this.inputVoluntaryInfo.address;
                realInfo.duration = this.inputVoluntaryInfo.duration;
                realInfo.eventtime = this.inputVoluntaryInfo.eventtime;

                axios.post("http://localhost:8080/insertVoluntary", realInfo).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/getVoluntaryById/" + realInfo.managerid).then((result) => {
                            this.tableData = result.data.data;
                        })
                    }

                })
            },
            alterVoluntary: function () {
                this.dialogAlVoluVisible = false;
                let realInfo = {
                    id: 0,
                    title: "",
                    summary: "",
                    phone: "",
                    address: "",
                    duration: "",
                    eventtime: ""
                }
                realInfo = this.updateVoluntaryInfo;
                //修改请求
                axios.put("http://localhost:8080/updateVoluntary/" + realInfo.id, realInfo).then(result => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/getVoluntaryById/" + this.ManagerId).then((result) => {
                            this.tableData = result.data.data;
                        })
                    }

                }
                )
            }

        }
    }
</script>

<style scoped>
    * {
        margin: 0 auto;
        padding: 0 auto;
    }
</style>

<style>

</style>